<template>
  <div class="animation-container_demo">
    <div id="ball_1"></div>
    <input class="demo-input" type="range" min="0" max="1" step="0.01" value="0" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'
  onMounted(() => {
    const inp: any = document.querySelector('.demo-input')
    const ball: any = document.querySelector('#ball_1')
    const moveFunc = () => {
      ball?.style.setProperty('--delay', `-${inp.value}s`)
    }
    inp.oninput = moveFunc
    moveFunc()
  })
</script>

<style lang="less" scoped>
  // 定义动画
  @keyframes move {
    50% {
      transform: translate(150px) scale(1.5);
    }
    100% {
      transform: translate(300px) scale(1);
    }
  }
  .animation-container_demo {
    position: relative;
    #ball_1 {
      --delay: 0s; // 定义动画延迟，类似波动时间轴实现实体在时间轴上的前进后退，对animation属性而言，delay 1s,表示1s后执行；delay 0s，表示立即执行，delay -1s，表示执行完毕，所以让delay在-1 -- 0s之间变化
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: pink;
      position: absolute;
      animation: move 1s var(--delay) linear forwards paused;
    }
    input {
      margin-top: 60px;
    }
  }
</style>
